import React, { ReactNode } from "react";
import { View, StyleSheet } from "react-native";
import { useTheme } from "../contexts/ThemeContext";
import { useThemeColors } from "./ThemeUtils";

interface ThemeWrapperProps {
  children: ReactNode;
  style?: any;
}

/**
 * 主题包装器组件
 *
 * 应用当前主题到子组件，提供统一的样式和主题背景色
 */
export const ThemeWrapper: React.FC<ThemeWrapperProps> = ({
  children,
  style,
}) => {
  const { themeMode } = useTheme();
  const themeColors = useThemeColors();

  return (
    <View
      style={[
        styles.container,
        { backgroundColor: themeColors.background },
        style,
      ]}
    >
      {children}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

/**
 * 卡片样式主题包装器
 *
 * 提供带有卡片样式的主题容器
 */
export const ThemeCard: React.FC<ThemeWrapperProps> = ({ children, style }) => {
  const themeColors = useThemeColors();

  return (
    <View
      style={[
        styles.card,
        {
          backgroundColor: themeColors.card,
          borderColor: themeColors.border,
          shadowColor:
            themeColors.mode === "dark"
              ? "rgba(0, 0, 0, 0.5)"
              : "rgba(0, 0, 0, 0.1)",
        },
        style,
      ]}
    >
      {children}
    </View>
  );
};

/**
 * 分隔线组件
 *
 * 提供符合当前主题风格的分隔线
 */
export const ThemeDivider: React.FC<{ style?: any }> = ({ style }) => {
  const themeColors = useThemeColors();

  return (
    <View
      style={[styles.divider, { backgroundColor: themeColors.divider }, style]}
    />
  );
};

// 附加样式
const styles2 = StyleSheet.create({
  card: {
    borderRadius: 8,
    padding: 16,
    margin: 8,
    borderWidth: 1,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  divider: {
    height: 1,
    width: "100%",
    marginVertical: 8,
  },
});

Object.assign(styles, styles2);

// 添加默认导出
export default ThemeWrapper;
